<template>
  <a-modal
    :title="`${model ? '编辑' : '新增'}乐管家`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item label="用户id" v-show="false">
          <a-input v-decorator="['id']"></a-input>
        </a-form-item>
        <a-form-item label="门店类型">
          <a-select v-decorator="['store_type']" placeholder="请选择类型" @change="onStoreTypeChange">
            <a-select-option :value="key" v-for="(item, key) in storeTypeList" :key="item">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="入驻门店">
          <a-select v-decorator="['provinceid']" placeholder="选择省" style="width: 50%" @change="choseProvince">
            <a-select-option :value="item.provinceid" v-for="item in provinceList" :key="item.id">{{ item.province }}</a-select-option>
          </a-select>
          <a-select v-decorator="['cityid']" placeholder="选择市" style="width: 50%" @change="choseCity">
            <a-select-option :value="item.cityid" v-for="item in cityList" :key="item.id">{{ item.city }}</a-select-option>
          </a-select>
          <a-select v-decorator="['areaid']" placeholder="选择区" style="width: 50%" @change="choseArea">
            <a-select-option :value="item.areaid" v-for="item in areaList" :key="item.id">{{ item.area }}</a-select-option>
          </a-select>
          <a-select v-decorator="['store_id']" placeholder="选择门店" style="width: 50%">
            <a-select-option :value="item.id" v-for="item in storeList" :key="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="名称">
          <a-input v-decorator="['name']" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input v-decorator="['mobile']" placeholder="请输入手机号" />
        </a-form-item>
        <a-form-item label="家庭住址">
          <a-input v-decorator="['family_address']" placeholder="请输入家庭住址" />
        </a-form-item>
        <a-form-item label="申请地址">
          <a-input v-decorator="['apply_address']" placeholder="请输入申请地址" />
        </a-form-item>
        <a-form-item label="简介">
          <a-textarea v-decorator="['brief']" placeholder="请填写简介" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { STORE_TYPE_MAP } from '@/mixins/storeType'
import { storeList,provinceLink,cityLink,areaLink,stores } from '@/api/notControl'
import formModalMixin from '@/mixins/formModalMixin'
import { stewardAdd, stewardEdit } from '@/api/stat'
// 表单字段
const fields = ['id', 'name', 'family_address', 'mobile', 'apply_address', 'store_type', 'store_id','provinceid','cityid	','areaid']

export default {
  mixins: [formModalMixin],
  data () {
    this.fields = fields
    this.editAction = stewardEdit
    this.addAction = stewardAdd
    return {
      storeTypeList: STORE_TYPE_MAP,
      storeList: [],
      provinceList:[],
      cityList:[],
      areaList:[],
      provinceid:'',
      cityid:'',
      areaid:'',
      province:'',
      city:'',
      area:''
    }
  },
  created(){
    this.getProvinceList()
  },
  methods: {
    watchBefore (model) {
      const { storeId, storeType } = model
      if (storeId && storeType) {
        return this.getStoreList({ store_id: storeId, store_type: storeType })
      }
    },
    getStoreList (params) {
      stores(params).then(res => {
        this.storeList = res.data.clothes
      })
    },
    onStoreTypeChange (e) {
      console.log(e)
      // this.getStoreList({ store_type: e })
      this.form.setFieldsValue({ store_id: undefined })
    },
    //省列表
    getProvinceList(){
      provinceLink().then(res=>{
        this.provinceList = res.data;
      })
    },
    //选择省
    choseProvince(e){
      this.provinceid = e;
      this.getCityList(e)
      for(var i=0; i < this.provinceList.length; i ++){
        if(this.provinceid == this.provinceList[i].provinceid){
          this.province = this.provinceList[i].province
        }
      }
    },
    //市列表
    getCityList(e){
      cityLink({provinceid:e}).then(res=>{
        this.cityList = res.data
      })
    },
    //选择市
    choseCity(e){
      this.cityid = e;
      this.getAreaList(e)
      for(var i=0; i < this.cityList.length; i ++){
        if(this.cityid == this.cityList[i].cityid){
          this.city = this.cityList[i].city
        }
      }
    },
    //区列表
    getAreaList(e){
      areaLink({cityid:e}).then(res=>{
        this.areaList = res.data
      })
    },
    choseArea(e){
      this.areaid = e;
      for(var i=0; i < this.areaList.length; i ++){
        if(this.areaid == this.areaList[i].areaid){
          this.area = this.areaList[i].area
        }
      }
      let params = {
        province:this.province,
        city:this.city,
        area:this.area,
        pid:0
      }
      this.getStoreList (params)
    }
  }
}
</script>
